<template>
  <div class="model-page">
    <div class="page-full-msgCenter">
      <!-- 顶部 -->
      <topHeader :show-left='true' :show-right='true' :title="title"></topHeader>
      <!-- 消息列表 -->
      <ul class="list_wrapper" v-show="data_page">
        <!-- ..1、活动消息 -->
        <li v-show="i.type==1" v-for="(i,idx) in data_page" :key="'list_'+idx" @click="toActivityDetail(i.id,idx)">
          <div class="img">
            <img src="../../../static/image/public/messge_huodong.png" alt />
            <!-- <i class="icon" :class="{'active':tag_status[idx]==1}"></i> -->
            <!-- 1未读 2领取-->
            <i class="icon" :class="{'active':i.tag==1}"></i>
          </div>
          <div class="info">
            <div class="s_tt">
              <p>{{i.title}}</p>
              <span>{{i.time}}</span>
            </div>
            <p class="s_des">{{i.content}}<span v-if="tag_status[idx]==1">（快来领取优惠券）</span></p>
          </div>
        </li>

         <!-- ..1、订单消息 -->
        <li v-show="i.type==2" v-for="(i,idx) in data_page" :key="'lists_'+idx" @click="toViewOrder(i.ordercode,i.id,idx)">
          <div class="img">
            <img :src="i.img_url" alt />
            <!-- <i class="icon" :class="{'active':msg_stauts[idx]==1}"></i> -->
            <!-- 1未读 2读取-->
            <i class="icon" :class="{'active':i.msg_stauts==1}"></i>
            <!-- <i class="icon" :class="{'active':order_status}"></i> -->
          </div>
          <div class="info">
            <div class="s_tt">
              <p>{{msgTitle()}}</p>
              <span>{{i.time}}</span>
            </div>
            <p class="s_des">咨询项目：{{i.title}}({{i.question_status}})</p>
          </div>
        </li>
      </ul>

      <!-- 暂无任何消息 -->
      <div class="noMsg" v-show="!data_page.length || data_page==''|| data_page==null">
        <dl>
          <dt>
            <img src="../../../static/image/public/messge_kong.png" alt />
          </dt>
          <dd>暂无任何消息</dd>
        </dl>
      </div>
    </div>

  </div>
</template>

<script>
import topHeader from '@/components/topHeader';
export default {
  components:{
    topHeader,
  },
  data() {
    return {
       title:'',
       msgCount:'',
       data_page:{},
       tag_status:false,
       order_status:false,
    };
  },
  created() {
    this.$store.commit('changePageLoading',true);
    this.msgCount = this.$route.query.msgCount;
    if(this.msgCount!=0){
      this.title = `消息中心(${this.msgCount})`;
    }else{
      this.title ='消息中心';
    }
    this.fetch_msglist();
  },
  watch:{
    msgCount:{
      handler:function(val,oldVal){
        this.msgCount = val;
        if(this.msgCount!=0){
          this.title = `消息中心(${this.msgCount})`;
        }else{
          this.title ='消息中心';
        }
        console.log(this.msgCount,this.title);
      },
      immediate:true,
    }
  },
  methods: {
    imgUrl(url){
      return tool.imgUrl(url);
    },
    msgTitle(data){
      var reg =/回复追问/;
      if(reg.test(data)){
        return '问答回复'
      }else{
        return '订单状态'
      };
    },
    fetch_msglist(idx){
      let uid =this.$store.state.userID||'866472034154769,866472034358089';
      if(uid){
        this.$fetch.post('/app/Jmyc/message_list',{'uid':uid}).then((res)=>{
          this.data_page = res.data;
          var arr = this.data_page;
          this.$store.commit('changePageLoading',false);
        });
      }
    },
    changePoint(state,showStatus){
      if(state==1){//1未读 
        showStatus = true;
      }else{
        showStatus = false;
      }
    },
    /**
      @func 
      @desc:点击进入活动详情
      @param:  id - 表示活动消息id
    */
    toActivityDetail(id,idx){
      if(id){
        this.$router.push({
          path:'/activityDetail',
          query:{
          'id':id
          }
        });
        if(this.msgCount>0){
          this.msgCount--;
        }
        if(this.data_page[idx].tag==1){
          this.data_page[idx].tag =2;
        }
        console.log(this.msgCount);
      }
    },
    /**
      @func 
      @desc:点击进入订单详情（此时也需改变消息状态为读取）
      @param: ordercode - 表示订单号   id - 表示消息id
    */
    toViewOrder(ordercode,id,idx){
      if(ordercode){
        this.$router.push({
          path:'/orderInfo',
          query:{
          'orderCode':ordercode,
          'isMiddlePage':1,//标识是从某个页面进入问大师，而非直接进入问大师
          }
        });
      }
      this.updatedStatus(id,idx);
    },
    /**
      @func 
      @desc:更新订单类消息是否读取状态
      @param: id - 表示消息id
    */
    updatedStatus(id,idx){
      this.$fetch.post('/app/Jmyc/message_status',{'id':id}).then((res)=>{
        if(res.code==200){
          if(this.msgCount>0){
            this.msgCount--;
            if(this.data_page[idx].msg_stauts==1){
              this.data_page[idx].msg_stauts =2;
            }
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../assets/css/public.less";
@import "../../assets/css/tml_base.less";
@import "./index.less";
</style>